Skip to content

refactor(v3): reorganize styles per client library - #455

Draft
wesleyboar wants to merge 74 commits into
epic/v3from
epic/v3--reorg
Draft

wesleyboar wants to merge 74 commits into
epic/v3from
epic/v3--reorg

Conversation

@wesleyboar

@wesleyboar wesleyboar commented Feb 18, 2025 •

Copy link
Copy Markdown
Member

Overview

Moved patterns into directories per client library — Bootstrap 3, Bootstrap 4, Bootstrap 5, Ant, TACC, etc. — and into child directories that mirror the client library's.

Status

  • quality of life
    • support absolute imports
      (to make refactoring easier)
    • use absolute imports
  • user experience
    • group "Bootstrap 3/4/5" into "Bootstrap"
    • group "Django CMS …" into "Django CMS"
      (consider adding alias "TACC/Core-CMS")
    • group "…Docs & M…down" into "Styles for Docs"
  • reorganization
    • Bootstrap
    • (many others)
    • TACC
      move ___.css to ___/___.css
      add context:subdir to ___/config.yml
      change label "(CMS|…) ___" to just "CMS|…"
      • components
      • elements
      • generics
      • objects
      • settings
      • tools
      • trumps

Changes

  • organized Bootstrap patterns like Bootstrap
  • moved patterns into _imports/___ dir for each library
  • moved ___.css to ___/___.css
  • added context:subdir to ___/config.yml
  • added missing demos
  • refactored cross-client patterns to share code
  • added mixins
  • documented docs/upgrade-client.md

Testing

  1. Open every pattern in the demo.
  2. Verify styles are as they were.
  3. Verify organization mirrors client:

UI

2025-07-30

epic v3 reorg 2025-07-30

* feat(djangocms-blog): pagination

* feat(pagination): WIP See `TODO` and `XXX`

- 🚧 bootstrap4 .pagination
    - ✅ default
    - 🐞 tacc (CMS/Portal)
        - UI bugs
        - consider combining
- ✅ djangocms-blog .pagination
- ❌ TACC .c-page
    - deleted out of ignorance
    - must be restored
    - reference provided

* fix(pagination): skin (color, border, outline, …)

- 💡 bootstrap4 .pagination
    - ✅ default
    - ✅ tacc (CMS/Portal)
        - 💡 consider combining
- ✅ djangocms-blog .pagination
- ❌ TACC .c-page
    - deleted out of ignorance
    - must be restored
    - reference provided

* refactor(pagination): link vs link--end

* docs(pagination): TODO @import x-link x-button

* refactor(pagination): __item & __link → vs __…-item & __…-link

* fix(pagination): skipped bootstrap link blue

* chore(pagination): re-order style and remove cruft

* fix(pagination): button (as link) looses width

* refactor(pagination): assume links are <a>

* enhance(pagination): edge cases

* fix(pagination): cms & portal match but are split

* fix(pagination): easy button links & square links

* fix(c-page): restore

* fix(c-page): restore it as it was, no c-pagination

* feat(pagination): tools/x-pagination demo

* fix(pagination): consistent border-radius

- components/c-page
- bootstrap4/pagination
- tools/x-pagination

* fix(pagination): consistent skip/etc links

* refactor(pag…): disabled/active links → modifiers

* enhance(pagination): disabled link for c-page

* fix(pag…): c-page should NOT use button class

* fix(pag…): list too tall, inconsistentent w/ x-…

* enhancepagination): consistent demos

* chore(pagination): mark all demos as ready

* fix(pagination): bootstrap discrepancy
* feat!: bootstrap4 WIP

* fix(v3): nav bootstrap css load bugs

* refactor(v3): Nav: Nav Tabs → Nav: Tabs

* feat(v3): bs4 grid reorg

* conf(v3): move subdir definition to subdir

* feat(v3): distinguish global styles demo/set…/base

* fix(v3): lost col demo styles

* docs(v3): grid belongs in layout

* fix(v3): grid css moved so update core-styles

* docs(v3): move bs4 nav to bs4 components

* docs(v3): figure belongs in content

* docs(v3): order bs4 categogories

* refactor(v3): move remaining bs4 patterns

* docs(v3): match bootstrap 4 pattern naming

* enhance(v3): hack to support tacc btns in modals

* docs(v3): extra note about TACC modal button hack

* refactor(v3): move all bs4 .postcss into child dir

* fix(v3): user expects nav-tabs.css not tabs.css
@wesleyboar wesleyboar changed the title Epic/v3 reorg refactor(v3): reorganize styles per client library Feb 18, 2025
wesleyboar and others added 5 commits August 6, 2026 14:22
## Overview

Syncs `epic/v3--reorg` with `epic/v3`'s merge of `main`.

## Related

- updates #455
- depends on #680 (merge that PR into `epic/v3` first)

## Changes

- **merged** `epic/v3` (with `main` merged in) into `epic/v3--reorg`
- **placed** new `bootstrap4/content/typography-headings` and
`tools/x-headings*` files per the reorg's client-library directory
structure
- **combined** reorg's own `portal` headings variant with main's new
`cms-vs-bootstrap`/`docs-vs-bootstrap` variants
- **combined** reorg's footer Bootstrap4 side-effects caveat with main's
newer footer note
- **removed** `headings--cms.hbs`, superseded by the generic
`headings.hbs` view

## Testing

1. `npm run build` - no errors
2. `npm run lint` - `No dist files found in source. Ready to publish.`

## UI

…

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Garrett Edmonds <43251554+edmondsgarrett@users.noreply.github.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
epic/v3's content (incl. main, via #680/#682) was already applied to
epic/v3--reorg via #681's chain propagation, but #681 was squash-merged,
severing the ancestry link again (same issue as #680 on epic/v3).
Recording this merge with the 'ours' strategy (verified zero net
content change) so future `git merge epic/v3` (and transitively
`git merge main`) operations compute the correct merge-base.
Resolves PR #455 conflicts caused by main's PR #683 (x-lead/s-lead
extraction, headings-as-v2/v3 bridges) landing at pre-reorg paths.

- placed new tools/trumps/elements files under their tacc/ subdir,
  per this branch's client-library reorg
- updated their @import/link paths for the new directory depth
- kept the reorg's `shouldLoadBootstrap4` context key, added the new
  `cms-v3` headings variant using it
chore(v3): merge epic/v3 into reorg, resolve #455 conflicts
Second pass at resolving #455: epic/v3 gained one more merge from
main since #701 (39d9944), re-opening the conflict. This time it
merged clean — no manual resolution needed.
# Conflicts:
#	src/lib/_imports/bootstrap4/components/nav/tabs/tabs.postcss
#	src/lib/_imports/core-styles.cms.v3-bridge-for-v2-users.postcss
#	src/lib/_imports/tacc/elements/headings-as-v3.postcss
#	src/lib/_imports/tacc/elements/headings/config.yml
…#703)

## Overview

Hardcodes `heading-N--v2`'s values instead of proxying the live
`heading-N` mixins.

## Related

- #693

## Changes

- **changed** `heading-2`/`heading-3`/`heading-4` in
`x-headings--cms.postcss` to hold v3's redesigned values directly
- **hardcoded** `heading-N--v2` in `x-headings.cms.v2.postcss` with v2's
original per-level values

## Testing

1. `npm install`
2. `npm run build:css`
3. `npm start`
4. Open `/components/detail/headings--cms`
5. Compare against its pre-PR state (no visual change expected)
6. Open `/components/detail/headings--cms-v2`
7. Compare against its pre-PR state (no visual change expected — that's
the whole point of hardcoding)
## Overview

Fixes a compound-vs-descendant selector bug that silently dropped the
heading reset (and now the margin baseline) on every native h1-h6 in
main content.

## Changes

- **fixed** `&:is(h1,h2,...)` to `& :is(h1,h2,...)` in the three
`:--main-content`-scoped heading files — the missing space compounded
onto the container selector instead of selecting its descendants, so it
never matched a real heading
- **added** a Bootstrap-mimicking margin baseline to the shared
`heading` mixin, so h4-h6 (previously undesigned) get the same treatment
h3 already had
- **dropped** the now-redundant Bootstrap4 load from the plain
CMS/CMS(v2) demo variants and the `docs-vs-bootstrap` variant, now that
#702 unified TACC's and Bootstrap's `.h1`-`.h6`

## Testing

1. `npm install`
2. `npm run build:css`
3. `npm start`
4. Open `/components/detail/headings--cms`
5. Native h1-h6 now get the line-height reset and margin baseline that
never applied before this fix
## Overview

Splits TACC's `.h1`-`.h6` classes into their own file so Bootstrap's
typography-headings module reuses it instead of redefining it.

## Related

- #689

## Changes

- **added** `heading-classes--cms`/`--docs` (`.h1`-`.h6` classes, per
theme) and `heading-N--cms`/`--docs` mixins
- **updated**:
    - native `h1`-`h6` elements files
    - Bootstrap's typography-headings module
    - CMS/Docs bundles that use them

## Testing

1. `npm install`
2. `npm run build:css`
3. `npm start`
4. Open https://localhost:3000/components/detail/headings--cms
5. Compare against its pre-PR state (no visual change expected)
6. Open https://localhost:3000/components/detail/headings--docs
9. Compare against its pre-PR state (no visual change expected)

## Notes

Bootstrap's typography-headings module isn't imported by any production
bundle today — because Core-Styles base is required even for Bootstrap
skin — but kept it in sync for demo.
## Overview

Deletes the bare heading-N mixins now that nothing but their own
--cms/--docs wrappers referenced them.

## Related

- #702

## Changes

- **deleted** the bare `heading-N` mixins, moving their declarations
directly into `heading-N--cms`/`heading-N--docs`

## Testing

1. `npm install`
2. `npm run build:css`
3. Confirmed `core-styles.cms.css` and `core-styles.docs.css` compile
byte-for-byte identical to before
# Conflicts:
#	src/lib/_imports/components/tacc-docs.postcss
#	src/lib/_imports/elements/headings--docs.postcss
#	src/lib/_imports/tacc/tools/x-headings--cms.postcss
#	src/lib/_imports/tools/x-headings.postcss
…ly files

wy-breadcrumbs.postcss and x-headings.cms.v2.postcss don't exist on
main/epic/v3, so the mixin-prefix-rename merged in from main didn't
touch their `@mixin x-breadcrumbs*`/`@mixin x-lead` calls.
# Conflicts:
#	src/lib/_imports/tacc/components/c-button/c-button.postcss
#	src/lib/_imports/tacc/tools/x-button.postcss
#	src/lib/_imports/tacc/tools/x-button/_x-button--tag.hbs
#	src/lib/_imports/tacc/tools/x-button/config.yml
#	src/lib/_imports/tacc/tools/x-button/demo.css
#	src/lib/_imports/tacc/tools/x-button/x-button.hbs
@wesleyboar wesleyboar self-assigned this Aug 21, 2026
wesleyboar added a commit that referenced this pull request Aug 31, 2026
## Overview

Adds a Claude Code skill documenting the recurring `main` → `epic/v3` →
`epic/v3--reorg` sync process, so it can be re-run from a fresh session
without re-deriving the approach each time.

## Related

- #454
- #455

## Changes

- **added** `sync-epic-v3` skill, covering `bin/sync-main.sh` usage,
manual conflict-resolution pitfalls (rename-detection misses,
silently-wrong auto-merges, clean-add files with stale imports), and the
post-merge build-verify step

## Testing

1. Run `/reload-skills`
2. Run `/sync-epic-v3` and confirm its instructions load

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature A new feature or replacement of existing feature major An incompatible API change refactor Re-writes/structures code but retains behavior

Projects

Status: In progress

Development

Successfully merging this pull request may close these issues.

1 participant